<template>
  <div>
    今日数据可视化
    <!-- <canvas id="main"></canvas> -->
    <div id="main" style="width:600px;height:400px"></div>
  </div>
</template>

<script>
export default {
  name: "Home",

  data() {
    return {

    }
  },
  mounted() {
    this.setData();
  },
  methods: {
    setData() {
      var chartDom = document.getElementById('main');
      var myChart = this.$echarts.init(chartDom);
      let option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      };
      option && myChart.setOption(option);

    }
  },

  
}
</script>

<style>
</style>